<template>
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back"></view>
		<u-navbar
			title="生日大礼包"
			@leftClick="leftClick"
			:placeholder="true"
			:fixed="true"
			bgColor="transparent"
			:autoBack="true"
		>
		</u-navbar>
		
		<view class="shrni_img_box">
			<image class="rih_img" :src="shenri_img"></image>
		</view>
		
		<view class="cone_pag_box">
			<view class="shenri_tex">联合宝宝生日大礼包</view>
			<view class="son_i">礼包描述：联合群美祝宝宝生日快乐，我们为宝宝送出神秘大礼包</view>
			<view class="son_a">礼品包含：尿不湿+奶嘴+神秘礼品+贺卡</view>
			<view class="son_d">配送方式：包邮送到家</view>
		</view>
		
		<!-- <view class="buttone">宝宝还未到生日哦</view> -->
		<view class="buttone lijilingqu" @click="buttonClick('lijilinqu')">立即领取</view>
		
		<!-- 会员到期弹窗提醒 起 -->
		<ZnDaoqi v-if="VipBuyShow"></ZnDaoqi>
		<!-- 会员到期弹窗提醒 终 -->
		
	</view>
</template>

<script>
	import HostConfig from '@/utils/host.js';
	import Host from '@/utils/api.js';
	import ZnDaoqi from '@/pages/daoqi/daoqi.vue';
	export default{
		components: {
			ZnDaoqi
		},
		data(){
			return{
				shenri_img: '',
				VipBuyShow: false,//显示会员未加入的弹窗
			}
		},
		onLoad() {
			let that = this;
			uni.request({
				url: Host.ApiBanner.url, //仅为示例，并非真实接口地址。
				method: 'GET',
				data: {
					location: 'joinplan'
				},
				success: (res) => {			
					let zhensongImg = res.data.image;
					let hostUrl = HostConfig.service.host;
					var list = res.data.data;
					list.map((value, index) =>{
						if(value.location == 'shenri'){	// 宝宝生日礼物
							that.shenri_img = hostUrl + value['image'];
						}
					})	
					
				}
			});
		},
		methods:{
			leftClick(){
				uni.navigateBack({
					delta:1,
				});
			},
			buttonClick(param){
				if(param == 'lijilinqu'){
					this.VipBuyShow = true;
				}
			},
		}
	}
</script>

<style>
	page{
		background: #FFFFFF;
	}
	.content{
		width: 100%;
		overflow-x: hidden;
	}
	.page_back{
		z-index: -100;
		background: linear-gradient(180deg, #6EC5FF 0%, rgba(167, 228, 255, 0) 100%);
		opacity: 0.11;
		width: 100%;
		height: 913upx;
		position: absolute;
	}
	.shrni_img_box{
		width: 696upx;
		height: 436upx;
		margin: 0 auto;
	}
	.rih_img{
		width: 696upx;
		height: 436upx;
	}
	.cone_pag_box{
		margin-top: 48upx;
		padding-left: 28upx;
		box-sizing: border-box;
	}
	.shenri_tex{
		font-size: 36upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50upx;
	}
	.son_i{
		height: 80upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40upx;
		margin-top: 24upx;
	}
	.son_a{
		height: 40upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40upx;
		margin-top: 24;
	}
	.son_d{
		height: 40upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40upx;
		margin-top: 24upx;
	}
	.buttone{
		width: 620upx;
		line-height: 100upx;
		background: #CACACA;
		border-radius: 52upx;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		margin: 0 auto;
		
		position: fixed;
		bottom: 100upx;
		left: 66upx;
		
		color: #FFFFFF;
	}
	.lijilingqu{
		background: #3B4144;
		color: #FFC28D;
	}
</style>
